<template>
    <div class="top">
        <span class="wei">{{title}}</span>
        <img src="../../../assets/add.png" class="add" @click.stop="showAdd">
        <img src="../../../assets/search.png" class="ser">
        <div class="additem" v-show="showAdditem">
            <div class="jiantou"></div>
            <!--  -->
            <ul>
                <li><img src="../../../assets/add/groupChat.png">发起群聊</li>
                <li><img src="../../../assets/add/addfri.png">添加好友</li>
                <li><img src="../../../assets/add/sao.png">扫一扫</li>
                <li><img src="../../../assets/add/pay.png">收付款</li>
                <li><img src="../../../assets/add/help.png">帮助与反馈</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:["showAdditem","title"],
    methods:{
        showAdd(){
            this.$emit("listenShowAdditem",this.showAdditem);
        }
    }
}
</script>

<style>
    *{
        padding: 0 !important;
        margin: 0;
    }
    .top{
        width:100%;
        height: 42px;
        background: #c8c6c9;
        position: fixed;
        z-index: 100;
    }
    .top>.wei{
        line-height: 42px;
        margin-left: 10px;
        font-family: '黑体','华文中宋','楷体';
        font-size: 18px;
    }
    .top>.ser,.top>.add{
        float: right;
        display: block;
        margin-top: 12px;
    }
    .top>.ser{
        width: 18px;
        margin-right: 25px;
    }
    .top>.add{
        width: 20px;
        margin-right: 12px;
    }
    .top>.additem{
        width: 158px;
        height: 195px;
        background: #696969;
        float: right;
        position: relative;
        border-radius: 5px;
        top: 48px;
        left: 71px;
    }
    .top>.additem>.jiantou{
        width: 0; 
        height: 0;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #996699 transparent;
        position: absolute;
        top: -12px;
        left: 133px;
    }
    ul{
        width: 70%;
        position: absolute;
        left: 47px;
        top: 1px;
    }
    ul>li{
        list-style: none;
        font-size: 17px;
        color: #e6e6e6;
        position: relative;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid rgba(230, 230, 230, 0.2);
    }
    ul>li>img{
        height: 20px;
        position: absolute;
        top: 8px;
        left: -35px;
    }

    ul>li:hover{
        background: #222;
    }
</style>